<template>
    <div id="risk-order-content" class="order-content tab-deposit-paid">
        <el-row class="risk-order-top">
            <el-col :span="12" class="form-col col-box">
                <el-row class="form-content">
                    <el-form :key="renderCountKey" label-width="110px" size="small">
                        <el-row class="form-row">
                            <el-col :span="12">
                                <el-form-item label="产品代码:">
                                    <RiskEntryInput
                                        id="deposit-paid-fundCode"
                                        @set-entry-data="getEntryslist"
                                        :returnDatas="instructionCache.fundCode"
                                    />
                                </el-form-item>
                                <el-form-item label="资产单元编号:" v-show="SHOW_SECURITY">
                                    <el-select v-model="instructionCache.assetCode" size="mini">
                                        <el-option
                                            v-for="i in computedAssetCodeSelectData"
                                            :key="i.assetCode"
                                            :label="i.assetCode + ' ' + i.assetName"
                                            :value="i.assetCode"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="组合编码:">
                                    <el-select
                                        name="组合编码"
                                        v-model="instructionCache.fundAccountCode"
                                        size="mini"
                                        @change="handleFundAccountCodeChange"
                                    >
                                        <el-option
                                            v-for="i in computedFundAccountCodeSelectData"
                                            :key="i.fundAccountCode"
                                            :label="i.fundAccountCode + ' ' + i.fundAccountName"
                                            :value="i.fundAccountCode"
                                            :name="'fundAccountCode-' + i.fundAccountCode"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="业务类型:">
                                    <el-select name="businessType" disabled size="mini" v-model="instructionCache.businessType">
                                        <el-option label="存款类" value="B"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="委托方向:">
                                    <el-select
                                        name="orderDirection"
                                        disabled
                                        v-model="instructionCache.orderDirection"
                                        size="mini"
                                        :class="['font-color-' + textColor]"
                                    >
                                        <el-option label="存款支取" value="i"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="目标类型:">
                                    <el-select name="targetType" v-model="instructionCache.targetType" size="mini" disabled>
                                        <el-option v-for="(value, key) in targetTypePojo" :key="key" :label="value" :value="key"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="支取类型:">
                                    <el-select name="advanceType" size="mini" v-model="instructionCache.advanceType">
                                        <el-option
                                            v-for="i in withDrawSelectData"
                                            :key="i.dictKey"
                                            :label="i.dictKeyName"
                                            :value="i.dictKey"
                                            :name="'advanceType-' + i.dictKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="支取日期:"
                                    ><el-date-picker
                                        name="drawDate"
                                        v-model="instructionCache.drawDate"
                                        type="date"
                                        format="yyyy/MM/dd"
                                        value-format="yyyyMMdd"
                                        placeholder="请选择"
                                        size="mini"
                                        style="width: 100%"
                                        :picker-options="pickerOptions"
                                    ></el-date-picker
                                ></el-form-item>
                                <el-form-item label="利息金额:">
                                    <RiskInputNumber
                                        name="drawInterest"
                                        :maxlength="15"
                                        :input="instructionCache.drawInterest"
                                        :inputAfter="'元'"
                                        :colorStyle="textColor"
                                        :precision="2"
                                        :field="'drawInterest'"
                                        @getInputNumber="getInputNumber(arguments)"
                                    >
                                    </RiskInputNumber>
                                </el-form-item>
                                <el-form-item label="兑付金额:">
                                    <RiskInputNumber
                                        name="orderBalance"
                                        :maxlength="15"
                                        :input="instructionCache.orderBalance"
                                        :inputAfter="'元'"
                                        :colorStyle="textColor"
                                        :precision="2"
                                        :field="'orderBalance'"
                                        :disabled="true"
                                        @getInputNumber="getInputNumber(arguments)"
                                    >
                                    </RiskInputNumber>
                                </el-form-item>
                                <el-form-item label="存单号:">
                                    <el-input name="receiptNo" disabled v-model="instructionCache.receiptNo"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>
                <el-row class="form-operate">
                    <el-col :span="7">
                        <i name="entrySetting" style="font-size: 25px" class="el-icon-setting iconClass" @click="openEntryGroup"></i>
                    </el-col>
                    <el-col :span="17" style="padding-left: 10px">
                        <el-button name="存款支取-重置" size="mini" @click="handleResetForm">重置</el-button>
                        <el-button name="存款支取-试算" type="primary" @click="test" size="mini">试算</el-button>
                        <el-button name="存款支取-下单" type="primary" @click="handlePlaceOrderClick" size="mini">下单</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12" class="col-box">
                <el-tabs type="card" v-model="activePane">
                    <el-tab-pane label="可支取存单" name="1">
                        <vxe-table
                            :data="fundPositionsListMsg.returnData.data"
                            border
                            style="width: 100%"
                            height="88%"
                            auto-resize
                            resizable
                            :resizable-config="{ minWidth: '60' }"
                            show-header-overflow
                            header-align="center"
                        >
                            <vxe-column title="操作" min-width="60" fixed="left">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-check"
                                        :disabled="scope.row.isGivenOrder ? true : false"
                                        size="mini"
                                        @click="handleSelect(scope.row)"
                                        :class="instructionCache.receiptNo === scope.row.receiptNo ? 'tableButton clickButton' : 'tableButton'"
                                        :name="scope.row.fundCode + '-' + scope.row.confirmNo"
                                    ></el-button>
                                </template>
                            </vxe-column>
                            <vxe-column
                                v-for="(item, index) in fundPositionsListMsg.title"
                                :key="index + item.val"
                                :field="item.val"
                                :title="item.name"
                                :sortable="item.sortable"
                                :column-config="{ isHover: true }"
                                :row-config="{ isHover: true }"
                                :filters="item.filters"
                                show-overflow
                                :min-width="item.minWidth"
                                :width="item.width"
                                :fixed="item.fixed"
                            >
                                <template slot-scope="scope">
                                    <span
                                        v-if="['endDate', 'depositDate', 'beginDate'].includes(item.val)"
                                        style="display: block; text-align: center"
                                    >
                                        {{ dateFormat(scope.row[item.val]) || '--' }}
                                    </span>
                                    <span
                                        v-else-if="['balance', 'receivableInterest', 'punishInterest', 'totalBalance'].includes(item.val)"
                                        style="float: right"
                                        >{{ numberFormat(scope.row[item.val], 2) || '--' }}</span
                                    >
                                    <span v-else-if="['depositTerm', 'depositRemainingTerm', 'notifyDays'].includes(item.val)" style="float: right">{{
                                        numberFormat(scope.row[item.val]) || '--'
                                    }}</span>
                                    <span v-else-if="item.val === 'status'">
                                        {{ scope.row[item.val] == '1' ? '存款存入' : '--' }}
                                    </span>
                                    <span v-else-if="item.val === 'advanceLimitFlag'">
                                        {{ Invest.advanceLimitFlag[scope.row[item.val]] || '--' }}
                                    </span>
                                    <span v-else-if="['rate', 'advanceRate'].includes(item.val)" style="float: right">{{
                                        scope.row[item.val] || '--'
                                    }}</span>
                                    <span v-else>{{ scope.row[item.val] || '--' }}</span>
                                </template>
                            </vxe-column>
                        </vxe-table>

                        <el-pagination
                            background
                            @current-change="getFundPositionList"
                            layout="total, prev, pager, next"
                            :current-page="pages.currentPage"
                            :page-size="pages.pageSize"
                            :total="fundPositionsListMsg.returnData.total"
                        >
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <el-row class="risk-order-bottom">
            <el-col class="col-box">
                <h3>
                    <el-row class="result-span">
                        <el-col :span="3">
                            <span>风控结果:</span>
                            <status-tag :code="riskResult"></status-tag>
                        </el-col>
                        <el-col :span="6">
                            <span>试算/下单时间: </span>
                            <span style="color: red">{{ calcTime }}</span>
                        </el-col>
                        <el-col :span="5">
                            <span>计算耗时: </span>
                            <span style="color: red">{{ takeTime }}</span>
                        </el-col>
                        <el-col :span="6">
                            <span>条目检查数:</span>
                            <span v-show="riskResultTable.length" style="color: red">{{ this.riskResultTable.length }}</span>
                        </el-col>
                        <el-col :span="4">
                            <el-button style="float: right" type="primary" size="mini" @click="layoutDialog = true">布局设置</el-button>
                            <!-- <el-checkbox v-model="thresholdTypeFilter['1']" @change="handelThresholdTypeFilter('1')">显示触警</el-checkbox>
                            <el-checkbox v-model="thresholdTypeFilter['0']" @change="handelThresholdTypeFilter('0')">显示合规</el-checkbox> -->
                        </el-col>
                    </el-row>
                </h3>
                <div style="height: calc(100% - 40px)">
                    <vxe-table
                        :key="tableKey"
                        :auto-resize="true"
                        :data="riskResultTable"
                        border
                        size="mini"
                        style="width: 100%"
                        height="100%"
                        v-loading="calcLoading"
                        resizable
                        :resizable-config="{ minWidth: '60' }"
                        show-header-overflow
                        :sort-config="{ defaultSort: { field: 'thresholdType', order: 'desc' }, sortMethod: customSortMethod }"
                        header-align="center"
                    >
                        <vxe-column
                            v-for="(item, index) in showFieldList"
                            :key="index + item.id"
                            :field="item.id"
                            :title="item.content"
                            :sortable="item.sortable"
                            :column-config="{ isHover: true }"
                            :row-config="{ isHover: true }"
                            :filters="item.filters"
                            :filter-method="item.filterMethod"
                            :filter-render="{ name: 'FilterInput' }"
                            show-overflow
                            min-width="120"
                        >
                            <template
                                #filter="{ $panel, column }"
                                v-if="
                                    [
                                        'fundCode',
                                        'fundNameSt',
                                        'assetCode',
                                        'assetName',
                                        'fundAccountCode',
                                        'fundAccountName',
                                        'stockCode',
                                        'stockNameSt',
                                        'entryCode',
                                        'entryName',
                                    ].includes(item.id)
                                "
                            >
                                <div>
                                    <el-input
                                        class="my-input"
                                        type="type"
                                        v-for="(option, index) in column.filters"
                                        :key="index"
                                        v-model="option.data"
                                        @input="$panel.changeOption($event, !!option.data, option)"
                                    />
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <span v-if="item.id === 'entryType'">{{ entryType[scope.row.entryType] }}</span>
                                <span v-else-if="item.id === 'compareType'">{{ compareDirection[scope.row.compareType] }}</span>
                                <status-tag v-else-if="item.id === 'thresholdType'" :code="scope.row.thresholdType" />
                                <branch-tag v-else-if="item.id === 'branchNum'" :data="scope.row" />
                                <span v-else-if="['investableBalance', 'maxTradable', 'maxTradableMerge'].includes(item.id)">
                                    <el-popover
                                        v-if="getObjectLength(scope.row[item.id]) && getObjectLength(scope.row[item.id]) > 1"
                                        placement="top"
                                        trigger="hover"
                                    >
                                        <div style="padding: 0 10px 10px 0" slot v-for="(value, key, index) in scope.row[item.id]" :key="key">
                                            {{ '阀值' + ++index + getShowName(item.id) + ': ' + scope.row[item.id][getParamName(item.id) + index] }}
                                        </div>
                                        <el-tag slot="reference">{{ getObjectLength(scope.row[item.id]) + '个' + getShowName(item.id) }}</el-tag>
                                    </el-popover>
                                    <span
                                        v-else-if="getObjectLength(scope.row[item.id])"
                                        v-for="(value, key) in scope.row[item.id]"
                                        :key="key"
                                        style="float: right"
                                        >{{ value }}</span
                                    >
                                    <span v-else style="float: right"> --</span>
                                </span>
                                <span v-else-if="item.id === 'thresholdValue'" style="float: right">{{
                                    scope.row[item.id] != undefined
                                        ? numberFormat(scope.row[item.id], scope.row.unit) + unitShow(scope.row.unit)
                                        : '--'
                                }}</span>

                                <span v-else-if="item.id === 'calculateValue'" style="float: right">
                                    {{
                                        scope.row[item.id] != undefined
                                            ? numberFormat(scope.row[item.id], !scope.row.unit || scope.row.unit == '无' ? 2 : scope.row.unit) +
                                              unitShow(scope.row.unit)
                                            : '--'
                                    }}
                                </span>
                                <span v-else>{{ scope.row[item.id] || '--' }}</span>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </el-col>
        </el-row>
        <RiskTableLayout
            title="页面布局"
            :visible.sync="layoutDialog"
            :field-list="tableColumns"
            :selected-field-list="selectedFieldList"
            :fixed-field-list="fixedFieldList"
            table-name="DEPOSIT_TRIAL_CALCULATE"
            @on-submit="onSubmit"
        />

        <EntryGroupSetting
            v-if="transDialog"
            :resourceCode="resourceCode"
            :transDialog="transDialog"
            @getEntryGroup="getEntryGroup"
            @closeEntryDialog="closeEntryDialog"
        />

        <!--处理下单后的弹窗-->
        <RiskOrderResultAfter
            v-if="orderCancelShow"
            :key="riskOrderResultAfterKey"
            :riskResultThresholdType="result"
            :res="riskOrderResultTable"
            @riskResultContinue="riskResultContinue"
            @riskResultCancel="riskResultCancel"
        />
    </div>
</template>
<script lang="ts">
import { UUID, numberFormat, unitShow, dateFormat, sortBy, uniqueFunc, getConfigItem } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskOrderResultAfter from '../components/risk-order-result-after.vue';
import Invest from '@/common/dict/invest';
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import { getActiveMenuCode, getUser } from '@/utils/user-util';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import RiskTable from '@/common/components/risk-table.vue';
import ColumnUtil from '../utils/column-util';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import BranchTag from '@/pages/risk-measure/components/branch-tag.vue';
import { foundStockExistAsync } from '@/pages/baseparam/api';
import moment from 'moment';
import { getSystemTradeDay } from '../api';
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import RiskInputNumber from '@/pages/risk-measure/components/risk-input-number.vue';

import VXETable from 'vxe-table';
import { lastForOf } from 'xe-utils/methods';
import { trialCalculate, cancelCommonOrder } from '@/common/api/instruction';
import EntryGroupSetting from '../components/entry-group-seting.vue';

// 创建一个简单的输入框筛选
VXETable.renderer.add('FilterInput', {
    // 筛选模板
    // renderFilter(h, renderOpts, params) {
    //     return [`<filter-input params=${params}></filter-input>`];
    // },
    // 重置数据方法
    filterResetMethod({ options }) {
        options.forEach(option => {
            option.data = '';
        });
    },
    // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
    filterRecoverMethod({ option }) {
        option.data = '';
    },
    // 筛选方法
    filterMethod({ option, row, column }) {
        const { data } = option;
        const cellValue = row[column.property];
        if (cellValue) {
            return cellValue.indexOf(data) > -1;
        }
        return false;
    },
});

// 存款支取指令风险下单Tab
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'PaidOrder',
    components: {
        RiskTableLayout,
        RiskTable,
        StatusTag,
        BranchTag,
        RiskOrderResultAfter,
        RiskEntryInput,
        RiskInputNumber,
        EntryGroupSetting,
    },
})
export default class PaidOrder extends Vue {
    dateFormat = dateFormat;
    numberFormat = numberFormat;
    unitShow = unitShow;
    @Prop()
    paidDetail: any;
    // @Prop()
    // type: any;
    ColumnUtil = new ColumnUtil();

    // 是否修改
    isUpdate: boolean = false;
    oldOuterOrderCode: string = '';
    serialNo: string = '';

    // 下单类型转换
    InstTypePojo = {
        '1': '1',
        '2': '1',
        '3': '2',
        '4': '2',
        '5': '3',
        '6': '1',
        '7': '6',
        '8': '8',
    };

    Invest: any = new Invest();
    // 显示的标签页
    activePane: string = '1';
    textColor: string = 'green';

    notMesh: boolean = true;

    cancelOrder: any = {
        cancelOrderType: '2',
        tradeUser: getUser().userCode, // 当前用户
        tradeUserName: getUser().userName, // 当前用户
        orderType: '4',
        instructionType: '10',
        instNo: '',
        originOuterOrderCode: '',
        outerOrderCode: UUID() + '-' + new Date().getTime(),
        requestId: UUID() + '-' + new Date().getTime(),
    };

    instruction = {};

    // 风控结果表数据
    riskResultTable: any[] = [];
    riskOrderResultTable: any[] = [];

    // 条目组穿梭框
    transDialog: boolean = false;

    layoutDialog: boolean = false;

    // 产品持仓信息相关
    fundPositionsListMsg = {
        returnData: { data: [], total: 0 },
        dataKey: 'data',
        title: this.ColumnUtil.CKPositionsColumns,
        height: '100%',
        // 隐藏页码
        hidePage: false,
        checked: { on: false, option: false },
    };

    // 全部表格列
    tableColumns: any[] = this.ColumnUtil.riskTableColumns;
    // 要显示的表格列
    showFieldList: any[] = [];
    // 已选择字段列表
    selectedFieldList: any[] = [];
    // 固定字段列表
    fixedFieldList: any[] = [
        { content: '产品代码', id: 'fundCode', sortable: true },
        { content: '产品名称', id: 'fundNameSt', sortable: false },
    ];
    // 风险类型
    entryTypeArr: any[] = [];
    // 阈值类型
    ThresholdTypeArr: any[] = [];

    // 图标dom
    iconDom: any = null;
    tableKey: number = 0;
    calcLoading: boolean = false;

    // instruction: any = {};
    instructionCache: any = {
        fundCode: '',
        assetCode: '',
        assetName: '',
        receiptNo: '', // 存单号
        fundAccountCode: '',
        fundAccountName: '',
        drawInterest: '', // 利息金额
        advanceType: '1', // 支取类型
        orderBalance: '', // 兑付金额
        businessType: 'B',
        drawDate: '', // 支取日期
        orderDirection: 'i',
        targetType: '2',
    };
    targetTypePojo: any = {}; // 目标类型

    pickerOptions: any = {};
    stockInfoCache: any = {};
    stockInfo: any = {};
    entryType = {}; // 风险类型字典
    compareDirection = {}; // 比较方向字典
    marketCodePojo: any = {};
    OrderDirection: any = {};

    calcTime: string = ''; // 下单/试算时间
    takeTime: string | number = ''; // 计算耗时
    riskResult: string | number = ''; // 风控结果

    fundCodeSelectData: any[] = []; // 产品序号下拉框数据
    withDrawSelectData: any[] = [
        { dictKeyName: '提前兑付', dictKey: '1' },
        { dictKeyName: '通知兑付', dictKey: '2' },
        { dictKeyName: '解约', dictKey: '3' },
        { dictKeyName: '到期兑付', dictKey: '4' },
    ]; // 支取类型下拉数据
    stockInfoPojo: any = {};
    renderCountKey: number = 0;

    fundpositionList: any[] = [];

    // 模块详情穿梭框数据
    tranColumns: any[] = [
        {
            label: '编号',
            prop: 'groupCode',
            width: 80,
        },
        {
            label: '名称',
            prop: 'groupName',
        },
    ];

    dataSourceLeft: any[] = [];
    dataSourceCalculateRight: any[] = [];
    dataSourceExcludeRight: any[] = [];
    selectKeyLeft: any[] = []; // 左边选中的key
    selectKeyCalculateRight: any[] = []; // 右边选中的key
    selectKeyExcludeRight: any[] = []; // 右边选中排除的key
    entryGroups: any[] = [];

    selectEntryGroupCode = {
        calculateEntryGroup: [],
        excludeEntryGroup: [],
    };

    // 分页
    pages = { currentPage: 1, pageSize: 25 };
    verInt: boolean = false;

    // 是否下单
    isPlaceOrder: boolean = false;
    form: any = {};
    result: string = '';
    tradeDays: any[] = []; // 交易日
    url: string = '';
    fundFilterList: any[] = [];
    stockFilterList: any[] = [];
    stockCode1: string = '';
    stockName1: string = '';

    stockCode2: string = '';
    stockName2: string = '';

    orderCancelShow: boolean = false;
    riskOrderResultAfterKey: number = 0;

    originOuterOrderCode: string = '';
    fundAccountCodeSelectData: any[] = [];
    stockReport: any[] = [];
    currentTradeDay: number = 0;
    flag: number = 0;
    resourceCode: string = '';

    async mounted() {
        this.resourceCode = getActiveMenuCode().defaultActive;

        this.getUserSelectEntryGroupList();
        getSystemTradeDay().then(res => {
            this.tradeDays = res.map(item => Number(item)).sort((a, b) => a - b);
        });
        this.entryTypeArr = this.objToArr(this.Invest.entryType);
        this.ThresholdTypeArr = this.objToArr(this.Invest.ThresholdType);
        this.queryLayout();
        this.getstockCodeList('');
        this.getCurrentTradeDay();
        // 获取产品信息 (产品序号下拉框数据)
        this.fundCodeSelectData = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        // 获取组合编码下拉框数据
        let arr = await SGU_CACHE('FundAccount', '/fundInfo/accounts', []);
        arr.forEach(item => {
            this.fundAccountCodeSelectData[item.fundCode] = item.fundAccounts;
        });
        // 获取风险类型字典
        this.entryType = this.Invest.entryType;
        // 获取比较方向字典
        this.compareDirection = this.Invest.CompareDirection;

        this.marketCodePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNMarketType());
        this.OrderDirection = DictionConstUtil.ListToPojo(await DictionConstUtil.FNTradeDirection());
        // 获取目标类型
        this.targetTypePojo = DictionConstUtil.targetType;
        // this.changeTable();
    }

    // 指令事件回调
    handleSettingValue(msg: any) {
        let data = JSON.parse(JSON.stringify(msg[0]));
        this.instructionCache = data;
    }

    getStockInfo(args: any) {
        this.stockInfo = args[0];
        this.stockInfoCache = this.stockInfo || {};
    }

    getEntryslist(val: any) {
        this.flag++;
        this.instructionCache.fundCode = val;
        this.handleFundCodeChange(val);
    }

    @Watch('instructionCache.fundCode', { immediate: true, deep: true })
    onWatchFundCode(newValue, oldValue) {
        if (newValue != oldValue && this.instructionCache.fundCode) {
            this.getFundPositionList(1);
        }
    }

    SHOW_SECURITY = getConfigItem('SHOW_SECURITY');
    // 监听 资产单元计算属性 (每当计算属性变动时 自动选中第一项)
    @Watch('computedAssetCodeSelectData', { immediate: true, deep: true })
    watchcomputedAssetCode(newData) {
        if (!this.SHOW_SECURITY) {
            return;
        }
        let obj: any = {};
        if (newData && newData.length) {
            const d1 = newData.find(item => item.assetCode == this.instructionCache.assetCode);
            obj = d1 || newData[0];
        }
        this.instructionCache.assetCode = obj.assetCode;
        this.instructionCache.assetName = obj.assetName;
    }

    // 监听 组合编码计算属性 (每当计算属性变动时 自动选中第一项)
    @Watch('computedFundAccountCodeSelectData', { immediate: true, deep: true })
    watchcomputedFundAccountCode(newData) {
        let obj: any = {};
        if (newData && newData.length) {
            const d1 = newData.find(item => item.fundAccountCode == this.instructionCache.fundAccountCode);
            obj = d1 || newData[0];
        }
        this.instructionCache.assetCode = obj.assetCode;
        this.instructionCache.assetName = obj.assetName;
        this.instructionCache.fundAccountCode = obj.fundAccountCode;
        this.instructionCache.fundAccountName = obj.fundAccountName;
    }

    get computedAssetCodeSelectData(): any {
        return uniqueFunc(this.fundAccountCodeSelectData[this.instructionCache.fundCode], 'assetCode');
    }

    // 组合编码下拉框计算属性;
    get computedFundAccountCodeSelectData() {
        let data = this.fundAccountCodeSelectData[this.instructionCache.fundCode];
        let retData = [];
        if (data && this.SHOW_SECURITY) {
            const obj = data.filter(item => item.assetCode == this.instructionCache.assetCode);
            retData = obj || [];
        } else {
            retData = data;
        }
        return retData;
    }

    @Watch('paidDetail', { immediate: true, deep: true })
    onWatchPaidDetail() {
        if (this.paidDetail?.instNo) {
            this.flag = 0;
            this.isUpdate = true;
            this.oldOuterOrderCode = this.paidDetail.outerOrderCode;
            this.serialNo = this.paidDetail.serialNo;
            this.cancelOrder.instNo = this.paidDetail.instNo;
            this.cancelOrder.originOuterOrderCode = this.paidDetail.outerOrderCode;

            this.renderCountKey++;
            if (this.paidDetail.depositReceipt) {
                this.handleSelect(this.paidDetail.depositReceipt);
                this.instructionCache.orderBalance = this.paidDetail.orderBalance;
            }
            this.instructionCache.drawInterest = this.paidDetail.drawInterest;
            this.instructionCache.fundCode = this.paidDetail.fundCode;
            this.instructionCache.fundAccountCode = this.paidDetail.groupCode;
        }
        // else {
        //     this.isUpdate = false;
        // }
    }

    // 重置按钮事件
    handleResetForm() {
        this.renderCountKey++;
        this.instructionCache.fundCode = '';
        this.instructionCache.drawInterest = '';
        this.instructionCache.orderBalance = '';
        this.instructionCache.receiptNo = '';
        this.instructionCache.advanceLimitFlag = '';
        this.getCurrentTradeDay();
        this.$emit('reset', null, 0);
        this.fundPositionsListMsg.returnData.data = [];
        this.fundPositionsListMsg.returnData.total = 0;
        this.isUpdate = false;
    }

    handleFundCodeChange(val: string): void {
        let fund = this.fundCodeSelectData.find(item => item.fundCode === val) || {};
        let fundAccount = (this.fundAccountCodeSelectData[this.instructionCache.fundCode] || [])[0] || {};
        this.instructionCache.fundNameSt = fund.fundNameSt;
        this.instructionCache.fundAccountCode = fundAccount.fundAccountCode;
        this.instructionCache.fundAccountName = fundAccount.fundAccountName;
        if (this.flag != 1) {
            this.instructionCache.drawInterest = '';
            this.instructionCache.orderBalance = '';
            this.instructionCache.receiptNo = '';
        }

        if (!val) {
            this.fundPositionsListMsg.returnData.data = [];
            this.fundPositionsListMsg.returnData.total = 0;
        }
    }

    handleFundAccountCodeChange(value: string): void {
        let fundAccount =
            (this.computedFundAccountCodeSelectData[this.instructionCache.fundCode] || []).find(item => item.fundAccountCode === value) || {};
        this.instructionCache.fundAccountName = fundAccount.fundAccountName;
    }
    // 获取证券代码下拉框数据
    private getstockCodeList(value: string) {
        this.$axios
            .post('/dict/stock/report/select/' + 6, {
                dictKey: value,
                dictKeyName: value,
            })
            .then((res: any) => {
                this.stockReport = res || [];
            });
    }

    // 选中可支取存单事件
    handleSelect(row: any) {
        this.instructionCache.reportCode = row.reportCode;
        this.instructionCache.receiptNo = row.receiptNo; // 存单号
        this.instructionCache.depositRate = row.rate;
        this.instructionCache.depositStartDate = row.beginDate;
        this.instructionCache.mutureDate = row.endDate;
        this.instructionCache.drawInterest = row.receivableInterest;
        this.instructionCache.orderBalance = row.balance;
        this.instructionCache.expireBalance = Number(row.receivableInterest) + Number(row.balance);
        this.instructionCache.bankCode = row.bankNo;
        this.instructionCache.advanceLimitFlag = row.advanceLimitFlag;

        this.instructionCache.receivableInterest = row.receivableInterest; //
        this.instructionCache.balance = row.balance;
        this.instructionCache.confirmNo = row.confirmNo;
        this.instructionCache.depositType = row.depositType;
        this.stockInfo = this.stockReport.find(
            item => item.reportCode === { '1': '870870', '2': '860860', '3': '890890', '6': '880880' }[row.depositType]
        );
    }

    // 获取当前交易日期
    getCurrentTradeDay() {
        this.$axios.get('/dict/initTradeDate').then((res: any) => {
            this.currentTradeDay = res;
            this.instructionCache.drawDate = this.currentTradeDay.toString();
            let date = new Date(moment(this.currentTradeDay.toString()).format('YYYY-MM-DD')).getTime();
            this.pickerOptions = {
                disabledDate(time) {
                    return time.getTime() < date - 1 * 24 * 3600 * 1000;
                },
            };
        });
    }

    getInputNumber(args: any) {
        let value = args[0];
        let field = args[1];
        this.instructionCache[field] = value;
    }

    // 可支取存单信息分页
    getFundPositionList(pages: any) {
        let form: any = {};
        let businessType = '';
        form = {
            // fundCode: this.instructionCache.fundCode,
            fundCode: [this.instructionCache.fundCode],
            // paging: pages
            paging: {
                currentPage: pages,
                pageSize: 25,
            },
        };

        // 获取可支取存单信息
        this.$axios.post('/position/bankDeposit/receipt/fund', form).then((res: any) => {
            res.list.forEach(ele => {
                ele.totalBalance = Number(ele.balance || '0') + Number(ele.receivableInterest || '0');
            });
            this.fundPositionsListMsg.returnData.data = res.list;
            this.fundPositionsListMsg.returnData.total = res.total;
        });
    }

    handleFilterFundPosition(filterList: any) {
        this.fundFilterList = filterList;
        this.stockCode1 = '';
        this.stockName1 = '';
        if (filterList.length) {
            let code = filterList.find(ele => ele.property === 'stockCode');
            let name = filterList.find(ele => ele.property === 'stockNameSt');
            this.stockCode1 = code?.datas[0] || '';
            this.stockName1 = name?.datas[0] || '';
        }
        this.getFundPositionList(this.pages);
    }

    // 校验指令信息
    verifyInstructionParam(instruction, stockInfo) {
        let verify: any = {};

        if (instruction.instType === '5') {
            verify = {
                fundCode: '产品代码',
                receiptNo: '存单号',
                fundAccountCode: '组合编码',
                drawInterest: '利息金额',
                balance: '兑付金额',
                drawDate: '支取日期',
            };
        }
        for (let key in verify) {
            if (!instruction[key] && key !== 'orderPriceType') {
                this.yh_message_warn(verify[key] + ' 不可为空');
                return false;
            }
        }
        return true;
    }

    // 组装指令信息
    createInstruction(instruction, stockInfo) {
        instruction.outerOrderCode = instruction.requestId;
        instruction.orderUser = getUser().userCode;
        instruction.orderPurpose = '15';

        instruction.investType = '1';

        instruction.orderLevel = '0';
        instruction.remark = ' ';
        if (instruction.instType === '5') {
            // 存款
            instruction.instructionType = '3';
            instruction.orderPrice = '1';
            instruction.orderPriceType = '1';
            instruction.orderAmount = instruction.orderBalance;
            instruction.orderDirection = 'i';
            instruction.bankBranchCode = ' ';
            instruction.marketCode = '6';
            instruction.businClass = instruction.businessType;
            instruction.instructionTypeName = instruction.businessType;
        }
        return instruction;
    }

    // 试算
    handlecCalculate(orderType: string) {
        const isUpdate = this.isUpdate;
        let instruction = JSON.parse(JSON.stringify(this.instructionCache || {}));
        let stockInfo = this.stockInfoCache || {};
        if (!instruction) {
            this.yh_message_warn('请填写相关信息');
            return;
        }
        instruction.requestId = UUID() + '-' + new Date().getTime();
        instruction.instType = '5';
        this.verInt = this.verifyInstructionParam(instruction, stockInfo);
        if (!this.verInt) {
            return;
        }

        instruction = this.createInstruction(instruction, stockInfo);
        instruction.orderType = orderType;
        instruction.orderPrice = instruction.orderPrice ? instruction.orderPrice : '0';
        let start = window.performance.now();

        // 获取当前提交时间 (试算/下单时间)
        // 补零
        let fillZero = n => {
            let result = n.toString().length === 1 ? '0' + n : n;
            return result;
        };
        // 时间戳转换 yyyy-MM-dd
        let formatTime = (t = new Date()) => {
            let d = new Date(t);
            let year = d.getFullYear();
            let month = d.getMonth() + 1;
            let date = d.getDate();
            let hours = d.getHours();
            let minutes = d.getMinutes();
            let seconds = d.getSeconds();
            let result = `${year}-${fillZero(month)}-${fillZero(date)} ${fillZero(hours)}:${fillZero(minutes)}:${fillZero(seconds)}`;
            return result;
        };
        this.calcTime = formatTime(new Date());
        let instructionList = [];
        instructionList.push(instruction);

        // 试算表单
        let calcForm: any = {
            orderType: orderType,
            multiType: '2',
            requestId: instruction.requestId,
            instructionType: instruction.showType == '6' ? '4' : this.InstTypePojo[instruction.instType],
            outOrderBatchCode: UUID() + new Date().getTime(),
            tradeUser: getUser().userCode,
            calculateEntryGroup: this.selectEntryGroupCode.calculateEntryGroup,
            excludeEntryGroup: this.selectEntryGroupCode.excludeEntryGroup,
            instList: instructionList,
        };

        this.originOuterOrderCode = instruction.outerOrderCode;
        // 下单表单
        let placeOrderForm: any = {
            orderType: orderType,
            multiType: '2',
            cancelType: '1',
            requestId: instruction.requestId,
            instructionType: instruction.showType == '6' ? '4' : this.InstTypePojo[instruction.instType],
            outOrderBatchCode: UUID() + new Date().getTime(),
            tradeUser: getUser().userCode,
            calculateEntryGroup: this.selectEntryGroupCode.calculateEntryGroup,
            excludeEntryGroup: this.selectEntryGroupCode.excludeEntryGroup,
            instList: instructionList,
        };

        if (orderType == '1') {
            this.form = JSON.parse(JSON.stringify(calcForm));
        } else {
            this.form = JSON.parse(JSON.stringify(placeOrderForm));
        }
        if (isUpdate) {
            this.form.excludeSerialNoSet = [this.serialNo];
        } else {
            this.form.excludeSerialNoSet = [];
        }
        this.calcLoading = true;
        trialCalculate(this.form)
            .then(resList => {
                if (resList) {
                    // 风控结果
                    this.riskResult = resList.thresholdType;
                    this.result = resList.thresholdType;

                    let end = window.performance.now();
                    // 计算耗时
                    this.takeTime = ((end - start) / 1000).toFixed(3) + '秒';
                    const h = this.$createElement;

                    if (!this.isPlaceOrder) {
                        this.yh_message_success('提交试算信息成功');
                    }

                    let data = resList.resultList || [];

                    // 根据产品代码 匹配产品名称
                    data.forEach(ele => {
                        ele.requestId = resList.requestId;
                        if (!ele.stockCode || ele.stockCode === ' ') {
                            ele.stockCode = this.stockInfo.stockCode;
                        }

                        for (let i = 0; i < this.fundCodeSelectData.length; i++) {
                            const item = this.fundCodeSelectData[i];
                            if (ele.fundCode === item.fundCode) {
                                ele.fundNameSt = item.fundNameSt;
                            }
                        }
                        ele.stockNameSt = this.stockInfo.stockNameSt;
                    });
                    // childCalculateResults = childCalculateResults.filter(item => item.thresholdType != '4');
                    // childCalculateResults = childCalculateResults.sort(this.sortBy('thresholdType'));

                    // this.riskResult = childCalculateResults[0]?.thresholdType || resList.result.thresholdType;
                    // this.result = childCalculateResults[0]?.thresholdType || resList.result.thresholdType;
                    // 获取最高级的阈值类型
                    this.riskOrderResultTable = JSON.parse(JSON.stringify(data));
                    this.riskResultTable = JSON.parse(JSON.stringify(this.riskOrderResultTable));

                    if (orderType === '2') {
                        if (this.result === '0') {
                            this.calcLoading = false;
                            this.handleResetForm();
                            this.handleResetResult();
                            this.orderCancelShow = false;
                            // this.riskResultTable = this.riskOrderResultTable;
                            this.$message.success({
                                message: h('p', null, [
                                    h('span', null, '本次风控试算结果为'),
                                    h('span', { style: 'color: #70b603' }, '"合规"'),
                                    h('span', null, '，已下单成功'),
                                ]),
                                // offset: 300,
                                showClose: true,
                                customClass: 'messageStyle',
                            });
                            if (isUpdate) {
                                this.handleUpdateCancel();
                            }
                            this.isUpdate = false;
                            // 重新获取可支取存单信息
                            this.getFundPositionList(1);
                        } else {
                            console.log('下单触发非合规');
                            this.riskOrderResultAfterKey++;
                            this.orderCancelShow = true;
                        }
                    } else {
                        this.orderCancelShow = false;
                        this.calcLoading = false;
                        // this.riskResultTable = this.riskOrderResultTable;
                    }
                } else {
                    this.riskResultTable = [];
                    this.calcLoading = false;
                    this.riskResult = '';
                    this.calcTime = '';
                    this.takeTime = '';
                }
            })
            .catch(() => {
                this.calcLoading = false;
            });
    }

    // 试算按钮点击
    test() {
        this.isPlaceOrder = false;
        this.orderCancelShow = false;
        if (this.instructionCache.advanceLimitFlag == '1') {
            this.$confirm('该存单不可提前支取，确定要进行提前兑付吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.handlecCalculate('1');
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        } else {
            this.handlecCalculate('1');
        }
    }

    // 下单按钮点击
    handlePlaceOrderClick() {
        this.result = '';
        this.isPlaceOrder = true;
        if (this.instructionCache.advanceLimitFlag == '1') {
            this.$confirm('该存单不可提前支取，确定要进行提前兑付吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.handlecCalculate('2');
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        } else {
            this.handlecCalculate('2');
        }
        // this.handlecCalculate('2');
    }

    /* ************************ 表格处理相关start *************************** */

    // 获取对象长度
    getObjectLength(obj: any) {
        if (obj) {
            return Object.keys(obj).length;
        } else {
            return 0;
        }
    }

    // 获取可投余量、最大可交易量名称
    getShowName(name: string) {
        if (name == 'investableBalance') {
            return '可投余量';
        } else if (name == 'maxTradable') {
            return '最大可交易量';
        } else if (name == 'maxTradableMerge') {
            return '最大可交易量(汇总)';
        }
    }

    // 获取字段名
    getParamName(name: string) {
        return name == 'investableBalance' ? 'INVESTABLE_BALANCE_' : name == 'maxTradable' ? 'MAX_TRADABLE_' : 'MAX_TRADABLE_';
    }

    // 转表格筛选下拉框数据
    objToArr(param) {
        let list = [];
        for (let key in param) {
            list.push({ label: param[key], value: key });
        }
        return list;
    }

    customSortMethod({ data, sortList }) {
        const sortItem = sortList[0];
        // 取出第一个排序的列
        const { property, order } = sortItem;
        let YHList = [];
        let NoYHlist = [];
        let list = [];
        let key = /^[a-zA-Z]+$/;
        data.forEach(ele => {
            if (ele.entryCode.match('.*[A-Z]+.*') || ele.entryCode.match('.*[a-z]+.*')) {
                YHList.push(ele);
            } else {
                NoYHlist.push(ele);
            }
        });

        if (order === 'asc' || order === 'desc') {
            if (property === 'entryCode') {
                YHList.sort(this.compare('entryCode'));
                NoYHlist.sort(this.compare('entryCode'));
                list = NoYHlist.concat(YHList);
                if (order === 'desc') {
                    list.reverse();
                }
            } else {
                list = data.slice().sort(sortBy(property, order));
            }
        }
        return list;
    }

    compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            if (value1.length < 10 && value2.length < 10) {
                var f = '0000000000'; // 10个0
                var aa = f.substring(0, 10 - ('' + value1).length) + value1;
                var bb = f.substring(0, 10 - ('' + value2).length) + value2;
                return aa > bb ? 1 : -1;
            } else {
                return value1 > value2 ? 1 : -1;
            }
        };
    }

    filterThresholdType({ value, row, column }) {
        return row.thresholdType == value;
    }

    filterEntryTypeMethod({ value, row, column }) {
        return row.entryType == value;
    }

    // 表格列筛选数据
    filterHandler({ option, row, column }) {
        const property = column['property'];
        return row[property].includes(option.data);
    }

    formatterCell({ cellValue }) {
        return cellValue || '--';
    }

    changeTable() {
        this.$nextTick(() => {
            let nodeName = [];
            let icon = [];
            if (!this.iconDom) {
                this.iconDom = document.querySelectorAll('.vxe-icon--funnel');
                this.iconDom.forEach((ele: any, index) => {
                    if (!['风险类型', '阈值类型'].includes(ele.parentNode.parentNode.children[0].innerHTML)) {
                        icon.push(index);
                    }
                });
                for (let i = 0; i < 8; i++) {
                    icon.forEach(ele => {
                        if (ele === i) {
                            this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                        }
                    });
                }
            }
        });
    }

    /* ************************** 表格处理相关end ***************************** */

    /* **************************** 布局设置start ***************************** */
    // 获取页面布局信息
    async queryLayout() {
        this.calcLoading = true;
        let resList: any = await new Promise((resolve, reject) => {
            this.$axios('/tableLayout/query/DEPOSIT_TRIAL_CALCULATE')
                .then((res: any) => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        if (resList) {
            this.selectedFieldList = JSON.parse(resList);
            this.showFieldList = this.fixedFieldList.concat(this.selectedFieldList);

            this.calcLoading = false;
        } else {
            this.selectedFieldList = this.tableColumns;
            this.showFieldList = this.tableColumns;
            this.calcLoading = false;
        }
        this.showFieldList.forEach((ele: any) => {
            if (['fundCode', 'assetCode', 'fundAccountCode', 'stockCode', 'entryCode'].includes(ele.id)) {
                this.$set(ele, 'sortable', true);
            }
            if (
                [
                    'fundCode',
                    'fundNameSt',
                    'assetCode',
                    'assetName',
                    'fundAccountCode',
                    'fundAccountName',
                    'stockCode',
                    'stockNameSt',
                    'entryCode',
                    'entryName',
                ].includes(ele.id)
            ) {
                this.$set(ele, 'filterMethod', this.filterHandler);
                this.$set(ele, 'filters', [{ data: '' }]);
                this.$set(ele, 'search', true);
            }
            if (ele.id == 'entryType') {
                this.$set(ele, 'filterMethod', this.filterEntryTypeMethod);
                this.$set(ele, 'filters', this.entryTypeArr);
            }
            if (ele.id == 'thresholdType') {
                this.$set(ele, 'filterMethod', this.filterThresholdType);
                this.$set(ele, 'filters', this.ThresholdTypeArr);
            }

            // 重新渲染表格
            this.changeTable();
            this.tableKey++;
        });
    }

    /**
     * 提交成功后回调
     * @param {Object} 回调数据
     */
    async onSubmit(data) {
        // console.log('固定字段', data.fixed);
        // console.log('选中字段', data.selected);
        await this.queryLayout();
        this.iconDom = null;
        this.changeTable();
        this.tableKey++;
    }

    // 清空试算结果
    handleResetResult() {
        this.riskResultTable = [];
        this.riskResult = '';
        this.calcTime = '';
        this.takeTime = '';
    }

    // 处理选择结果返回
    riskResultContinue() {
        console.log('继续下达');
        this.handleResetForm();
        this.calcLoading = false;
        this.handleResetResult();
        if (this.isUpdate) {
            this.handleUpdateCancel();
        }
        // this.riskResultTable = this.riskOrderResultTable;
        this.yh_message_success('指令下达成功');
        // 重新获取可支取存单信息
        this.getFundPositionList(1);
        this.isUpdate = false;
    }

    // 取消
    riskResultCancel() {
        this.calcLoading = false;
        // this.riskResultTable = [];
        console.log('终止下达');
        cancelCommonOrder({
            cancelOrderType: '2',
            tradeUser: getUser().userCode, // 当前用户
            tradeUserName: getUser().userName, // 当前用户
            orderType: '4',
            instructionType: '10',
            originOuterOrderCode: this.originOuterOrderCode,
            outerOrderCode: UUID() + '-' + new Date().getTime(),
            requestId: UUID() + '-' + new Date().getTime(),
            delOriginOuterOrderCodeList: [this.originOuterOrderCode],
        }).then(res => {
            this.yh_message_success('已终止指令下达');
        });
    }

    // 修改指令撤单
    handleUpdateCancel() {
        cancelCommonOrder({
            cancelOrderType: '2',
            tradeUser: getUser().userCode, // 当前用户
            tradeUserName: getUser().userName, // 当前用户
            orderType: '4',
            instructionType: '10',
            instNo: '',
            originOuterOrderCode: this.oldOuterOrderCode,
            outerOrderCode: UUID() + '-' + new Date().getTime(),
            requestId: UUID() + '-' + new Date().getTime(),
            delOriginOuterOrderCodeList: [this.oldOuterOrderCode],
        })
            .then(res => {})
            .catch(err => {
                this.yh_message_success(err);
            });
    }

    /* ************************** 布局设置end *******************************/

    /* ************************************ 条目组设置start ********************************** */
    openEntryGroup() {
        this.transDialog = true;
    }

    getEntryGroup(value: any) {
        this.selectEntryGroupCode.calculateEntryGroup = value.calculateEntryGroup;
        this.selectEntryGroupCode.excludeEntryGroup = value.excludeEntryGroup;
    }

    closeEntryDialog() {
        this.transDialog = false;
        this.getUserSelectEntryGroupList();
    }

    getUserSelectEntryGroupList() {
        this.$axios.get('/entry/group/user/select/list/' + this.resourceCode).then((res: any) => {
            res = res || [];
            let selectEntryGroupCode = {
                calculateEntryGroup: res.filter(item => item.instGroupType === '1' && item.groupCode !== 'DEFAULT').map(item => item.groupCode),
                excludeEntryGroup: res.filter(item => item.instGroupType === '2' && item.groupCode !== 'DEFAULT').map(item => item.groupCode),
            };
            this.selectEntryGroupCode.calculateEntryGroup = selectEntryGroupCode.calculateEntryGroup;
            this.selectEntryGroupCode.excludeEntryGroup = selectEntryGroupCode.excludeEntryGroup;
        });
    }

    /* ************************************ 条目组设置end ********************************** */
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-measure/style/measure';
@import '@/pages/risk-time/styles/risk-order';
/deep/.el-dialog .el-dialog__body {
    max-height: 70vh !important;
}
.tableButton {
    padding: 5px 10px;
}

.clickButton {
    background-color: #a0cfff;
    border-color: #a0cfff;
}

.font-color-green {
    /deep/ input {
        color: green !important;
    }
    /deep/ .el-input-group__append {
        color: green !important;
    }
}
</style>
<style lang="scss">
.messageStyle {
    background-color: #ecf9e3;
    border-color: #ecf9e3;
    font-size: 18px;
    .el-icon-success {
        color: #67c23a;
    }
}
.messageBoxStyle {
    background-color: #ecf9e3;
    border-color: #ecf9e3;
    .el-message-box__header {
        padding: 0 15px 10px;
    }
    .el-message-box__btns {
        text-align: center;

        button:first-of-type {
            background-color: #67c23a;
            border-color: #67c23a;
            color: #fff;
        }
        button:nth-of-type(2) {
            background-color: #a30014;
            border-color: #a30014;
            color: #fff;
        }
    }
}
</style>
